<template>
  <div class="coupon-wrap">
    <div class="tab-wrap flex-yc">
      <span class="active">可用优惠券</span>
      <span>不可用优惠券</span>
    </div>
    <p class="flex-yc">
      使用 1 张抵用券，共抵扣
      <b>¥20.00</b>
    </p>
    <div class="coupon-con flex flex-xbt">
      <div class="coupon-item" v-for="item in 4" :key="item">
        <div class="con flex-yc">
          <div class="flex-y flex-xc">
            <span class="money flex">
              ￥
              <p>20</p>
            </span>
            <span>满 200 可用</span>
          </div>
          <div class="font flex-y flex-xc">
            <h3>【专属活动】满 200 减 20 优惠券</h3>
            <span>2030.03.03-2023.02.02</span>
            <div class="more flex-yc a" @click="onShowMoreCouponDetail($event)">
              展开详情
              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </div>
          </div>
        </div>
        <p class="detail-con">
          使用要求：【专属活动】满 200 减 20 优惠券【专属活动】满 200 减 20
          优惠券
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 查看更多优惠券详情
import { findParentElement } from '@/utils/utils.ts'

const onShowMoreCouponDetail = (event: Event) => {
  let parentHtml = findParentElement(event.target, 'coupon-item')
  if (/show-detail/.test(parentHtml.className)) {
    parentHtml.classList.remove('show-detail')
  } else {
    parentHtml.classList.add('show-detail')
  }
}
</script>

<style scoped lang="scss">
.coupon-wrap {
  margin-top: 32px;

  .tab-wrap {
    span {
      padding-bottom: 13px;
      font-size: 16px;
      font-weight: 500;
      border-bottom: 2px solid transparent;

      &.active {
        border-bottom-color: $primary;
      }

      & + span {
        margin-left: 36px;
      }
    }
  }

  p.flex-yc {
    padding: 14px 0;
    font-size: 14px;

    b {
      margin-left: 5px;
      color: $primary;
    }
  }

  .coupon-con {
    flex-wrap: wrap;

    .coupon-item {
      width: 372px;
      margin-bottom: 20px;
      overflow: hidden;
      border: 1px solid $borderCol;
      border-radius: 8px;

      .con {
        position: relative;
        padding: 24px 32px;

        &::before,
        &::after {
          position: absolute;
          width: 26px;
          height: 26px;
          content: '';
          background-color: #fff;
          border: 1px solid $borderCol;
          border-radius: 50%;
        }

        &::before {
          left: -13px;
        }

        &::after {
          right: -13px;
        }

        .money {
          align-items: flex-end;
          margin-right: 32px;
          font-size: 14px;
          color: $primary;

          p {
            font-size: 32px;
          }

          & + span {
            margin-top: 13px;
            font-size: 12px;
            color: $primary;
          }
        }

        .font {
          h3 {
            margin-bottom: 2px;
            font-size: 14px;
            font-weight: 500 !important;
            line-height: 16px;
            color: rgb(4 7 36 / 85%);
          }

          span {
            font-size: 12px;
            color: rgb(4 7 36 / 45%);
          }

          .more {
            margin-top: 13px;
            font-size: 14px;
            color: rgb(4 7 36 / 45%);
          }
        }
      }

      .detail-con {
        display: none;
        padding: 10px 15px 5px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: rgb(4 7 36 / 45%);
        border-top: 1px solid $borderCol;
      }

      &.show-detail {
        .detail-con {
          display: block;
        }
      }
    }
  }
}
</style>
